import { getTransactionConfigAll } from '@/services';
import { mySessionStorage } from '@/utils/storage';
import { TabBar } from 'antd-mobile';
import { AddOutline, AppOutline, UserOutline } from 'antd-mobile-icons';
import { Outlet, history, useLocation } from 'umi';
import styles from './index.less';

export default function Layout() {
  const location = useLocation();
  if (!mySessionStorage('get', 'transactionConfig')) {
    getTransactionConfigAll().then((res) => {
      if (res.code === 1) {
        mySessionStorage('set', 'transactionConfig', res.data);
      }
    });
  }

  const tabs = [
    {
      key: '/',
      title: '首页',
      icon: <AppOutline />,
      // badge: Badge.dot,
    },
    {
      key: '/upload',
      title: '上传',
      icon: <AddOutline />,
    },
    {
      key: '/statistics',
      title: '统计',
      icon: <UserOutline />,
    },
  ];
  const onChange = (key: string) => {
    history.push(`${key}`);
  };
  return (
    <div className={styles.app}>
      {/* <div className={styles.top}>
          配合路由使用
        </div> */}
      <div className={styles.body}>
        <Outlet />
      </div>
      <div className={styles.bottom}>
        <TabBar activeKey={location.pathname} onChange={onChange}>
          {tabs.map((item) => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </div>
    </div>
  );
}
